<template>
	<view class="container"  :style="{height: screenHeight+'px'}">
		<myNav :title="nickname" :scrollTop="scrollTop"></myNav>
		
		<image class="backImage" :src="backImage" mode="aspectFill" @click="seeBack"></image>
		<view class="mainCard" :style="{height: screenHeight+'px', top: mainCardToTop+'px'}" >
			<view class="interactWithUser" style="z-index: 999;">
			<view class="concernHim" @click="concern"
					  :style="{
						  background: isConcern==true?'rgba(248, 248, 248, 0.8)':'white',
						  color: isConcern==true?'grey':'black'
						  }">
					{{isConcern==true?"已关注":"关注"}}
				</view>
			</view>
			<view class="userBaseCard">
				<view class="mainInfo">
					<view class="head">
						<view class="vipLogo" v-if="isVip"></view>
						<image class="avatar" :src="avatar" mode="aspectFill"></image>
					</view>
					
					<view class="ownInfo">
						<view class="nickName">
							{{nickname}}
						</view>
						<view class="firstTags">
							<uni-tag class="identifyTag" v-if="Boolean(school)"  
														 :text="school" :inverted="true" size="mini" type="primary"></uni-tag>
							<uni-tag class="identifyTag"  v-if="Boolean(major)"
														 :text="major" :inverted="true" size="mini" type="primary"></uni-tag>
<!-- 							<view v-if="!$store.state.loginUser.userBaseInfo.ownInfo.school && !$store.state.loginUser.userBaseInfo.ownInfo.major"
								  >
								还没有标签哦，快去填写个人信息吧
							</view> -->
							<!--
							<view class="identifyTag">{{this.$store.state.loginUser.userBaseInfo.ownInfo.school}}</view>
							<view class="identifyTag">{{this.$store.state.loginUser.userBaseInfo.ownInfo.major}}</view>
							-->
						</view>
						
						<view>
							<uni-tag class="secondTags" v-for="(item, index) in tags" :key="index" :text="item" :inverted="true" type="warning" size="mini"></uni-tag>
						</view>
					</view>
				</view>
				
				<view class="introduce">
					{{introduce}}
				</view>
				
				<view class="concernAndFans">
					<view class="concern" @click="seeConcern">
						<view class="data">
							{{concernCount}}
						</view>
						<p>关注</p>
					</view>
					<view class="fans" @click="seeFans">
						<view class="data">
							{{fansCount}}
						</view>
						<p>粉丝</p>
					</view>
				</view>
			</view>
			
			<!--经历、动态等区域-->
			
			<view class="mainFrame">
				<u-sticky :offset-top="navHeight" bgColor="white" customNavHeight="0">
					<view class="stickyBar" style="background-color:white">
						<u-tabs class="tabs"
						:current="current"
						@change="changeFrame"
						:list="guideList"
						lineWidth="30"
						lineHeight="9"
						lineColor="#3c9cff"
						:activeStyle="{
							color: '#3c9cff',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
						>
						</u-tabs>
					</view>
				</u-sticky>
				<view class="frame" style="margin: 0 auto;">
					<view class="" v-if="current == 0">
						<userThoughts :thoughtsList="Thoughts" style="transition: all 0.5s ease-in-out;"></userThoughts>
					</view>
					<view class="" v-if="current == 1">
						<userArticles></userArticles>
					</view>
					<view class="" v-if="current == 2">
						<userPostList></userPostList>
					</view>
					<view class="" v-if="current == 3">
						<userExprience></userExprience>
					</view>
					<view class="" v-if="current == 4">
						<userCollections></userCollections>
					</view>
				</view>
			</view>
			</view>
			
		</view>
		<!--
		<navigator url="./loginAndRegister" hover-class="none">
			
		</navigator>
		-->
	</view>  
</template>

<script>
import { TRUE } from 'sass'
	export default{
		data(){
			return{
				navHeight: 110,
				navOpacity: 0,
				//控制层参数
				show:false,
				screenHeight: undefined,
				mainCardToTop: undefined,
				current: 0,
				isConcern:undefined,
				newConcern:false,
				scrollTop: 0,
				
				//用户信息层参数
				userId: '',
				isVip:false,
				avatar: '',
				school: '',
				major: '',
				nickname:'',
				tags: [],
				introduce: '',
				concernCount: null,
				fansCouont:null,
				originConcernStatus: false,
				Thoughts:[
					{
						index: 0,
						id: 0,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-26",
						title: "测试短标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 1,
						id: 1,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-25",
						title: "测试长标题: 测试长标题,测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 2,
						id: 2,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-24",
						title: "测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 3,
						id: 3,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-23",
						title: "测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 4,
						id: 4,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-22",
						title: "测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 5,
						id: 5,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-21",
						title: "测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 6,
						id: 6,
						coverUrl:"https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-21",
						title: "测试长标题: 测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 7,
						id: 7,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-21",
						title: "测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 8,
						id: 8,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-26",
						title: "测试短标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 9,
						id: 9,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-25",
						title: "测试长标题: 测试长标题,测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 10,
						id: 10,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-24",
						title: "测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 11,
						id: 11,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-23",
						title: "测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 12,
						id: 12,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-22",
						title: "测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 13,
						id: 13,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-21",
						title: "测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 14,
						id: 14,
						coverUrl:"https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-21",
						title: "测试长标题: 测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
					{
						index: 15,
						id: 15,
						coverUrl: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						time: "2023-3-21",
						title: "测试长标题: 测试长标题",
						likeCount: 10,
						CommentCount: 5,
					},
				],
				guideList:[
					{
						name: "动态",
					},
					{
						name: "文章",
					},
					{
						name: "帖子",
					},
					{
						name: "经历",
					},
					{
						name: "活动",
					},
					{
						name: "收藏",
					}
				],
				postList: [],
				experienceList:[],
				activities: []
			}
		},
		methods:{
			open(){
				this.show = true
			},
			close(){
				this.show = false
			},
			init(){
				uni.getSystemInfo({
					success: (res) => {
						this.screenHeight = res.screenHeight;
						this.mainCardToTop = 200;
					}
				})
			},
			changeFrame(index){
				this.current = index.index;
			},
			seeConcern(){
				uni.request({
					method:'GET',
					url:'http://162.14.102.246:8090/user/front/follow/1/15/'+this.userId,
					//url:'http://192.168.31.146:8090/user/front/follow/1/15/'+this.$store.state.loginUser.userBaseInfo.id,
				}).then(res => {
					console.log(res)
					
				}).then(() => {
					let obj = {
					}
					uni.navigateTo({
						url:"/pages/components/userHomeFrames/concernsAndFans?kind=1&info="+encodeURIComponent(JSON.stringify(this.concernList)),
					})
					
				})
			},
			seeFans(){
				uni.request({
					method:'GET',
					url:'http://162.14.102.246:8090/user/front/fans/1/15/'+this.userId,
					//url:'http://192.168.31.146:8090/user/front/follow/1/15/'+this.$store.state.loginUser.userBaseInfo.id,
				}).then(res => {
					console.log(res)
					
				}).then(() => {
					uni.navigateTo({
						url:"/pages/components/userHomeFrames/concernsAndFans?kind=2&info="+encodeURIComponent(JSON.stringify(this.fansList)),
					})
					
				})
			},
			seeBack(){
				//console.log(this.userInfo.tags)
				uni.previewImage({
					urls:[this.userInfo.backImage]
				}) 
			},
			concern(){
				if(this.isConcern == false){
					this.isConcern = true
					this.newConcern = true
				}else{
					this.isConcern = false
					this.newConcern = false
				}
			},
		},
		mounted() {
			// this.$nextTick(()=>{
			// 	this.userInfo.tags = this.$store.state.loginUser.userBaseInfo.tagList
			// })
			//console.log('mouted',this.$store.state.loginUser.userBaseInfo.tagList)
		},
		onShow() {
			//this.userInfo.tags = this.$store.state.loginUser.userBaseInfo.tagList
			//console.log('onLoad',this.userInfo.tags)
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onLoad(options) {
			this.init();
			//this.getMyInfo();
			// this.userInfo.tags = this.$store.state.loginUser.userBaseInfo.tagList
			
			// if(options.id == this.$store.state.loginUser.userBaseInfo.id){
			// 	this.isMe = true
			// }else{
			// 	this.isMe = false
			// }
			let info = JSON.parse(decodeURIComponent(options.info))
			this.userId = info.id
			//this.isVip = info.isVip
			this.avatar = info.avatar
			this.school = info.school
			this.major = info.major
			this.nickname = info.nickname
			info.tagList.forEach(item => {
				this.tags.push(item.tagName)
			})
			this.fansCount = info.fansCouont!=null?info.fansCount:0
			this.concernCount = info.concernCount!=null?info.concernCount:0
			
			console.log('用户id',this.userId)
			this.isConcern = this.$store.state.loginUser.userBaseInfo.concernList.find(obj => obj.id == this.userId) === undefined ? false : true
			console.log('关注列表中用户对象',this.$store.state.loginUser.userBaseInfo.concernList.find(obj => obj.id == this.userId))
			this.originConcernStatus = this.isConcern
			// 待功能开放
			// this.Thoughts = info.Thoughts
			// this.guideList = info.guideList
			// this.postList = info.postList
			// this.experienceList = info.experienceList
			// this.activities = info.activities
			
			// if(!this.isMe){
				
			// }
		},
		onUnload(){
			if(this.isConcern != this.originConcernStatus){
				uni.request({
					url:`http://162.14.102.246:8090/user/front/follow/${this.userId}/${this.newConcern?1:0}`,
					method:'GET',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					},
				}).then(res => {
					console.log(res)
					if(res.data.code == 200){
						console.log(this.$store.state.loginUser.userBaseInfo.fansList)
						console.log('newConcern: ',this.newConcern)
						//let both = this.$store.state.loginUser.userBaseInfo.fansList.find(obj => obj.id == this.userId) == undefined?false:true
						if(this.newConcern==1){
							this.$store.state.loginUser.userBaseInfo.concernList.push({
								id:this.userId,
								avatar: this.avatar,
								nickname: this.nickname,
								isVip: this.isVip,
								introduce: this.introduce,
								inConcern: true
							})
						}else{
							let index = this.$store.state.loginUser.userBaseInfo.concernList.indexOf(this.$store.state.loginUser.userBaseInfo.fansList.find(obj => obj.id == this.userId))
							console.log(index)
							this.$store.state.loginUser.userBaseInfo.concernList.unshift(index, 1)
						}
						console.log(this.$store.state.loginUser.userBaseInfo.fansList)
					}
				})
			}
			console.log('关注:',this.$store.state.loginUser.userBaseInfo.concernList)
			console.log('粉丝:',this.$store.state.loginUser.userBaseInfo.fansList)
			this.$forceUpdate()
		}
	}
</script>
	
<style scoped>
	.container{
		width: 100%;
	}
	.backImage{
		position: absolute;
		width: 100%;
		height: 400upx;
		background: linear-gradient(to right, #e55d87, #5fc3e4);
	}
	.userBaseCard{
		display: flex;
		flex-direction: column;
		min-height: 560upx;
		width: 100%;
		padding-left: 60rpx;
		padding-right: 60rpx;
		position: relative;
		top: -90rpx;
		border-bottom: 12rpx solid rgba(211, 211, 211, 0.3);
	}	
	.mainCard{
		position: relative !important;
		top: 400upx;
		position: absolute;
		display: flex;
		flex-direction: column;
		background-color: white;
		position: relative;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
	}
	.mainInfo{
		position: relative;
		padding: 10rpx;
		display: flex;
		align-items: center;
	}
	.ownInfo{
		margin-left: 20rpx;
		margin-top: 80rpx;
	}
	::v-deep .secondTags{
		display: inline-block;
		border-radius: 2rpx;
		margin-right: 4rpx;
	}
	.interactWithUser{
		position: absolute;
		height: 60upx;
		width: 140upx;
		top: 30upx;
		left: 75%;
		border-radius: 30upx;
		border: 4upx solid rgba(211, 211, 211, 0.2);
		font-size: 0.7rem;
	}
	.interactWithUser>view{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 30upx;
		letter-spacing: 0.1rem;
		font-weight: bold;
	}
	.firstTags{
		display: flex;
		flex-direction: row;
		margin-bottom: 4rpx;
	}
	.nickName{
		margin-bottom: 11rpx;
	}
	::v-deep .identifyTag{
		margin-right: 6rpx;
	}
	.head{
		width: 150rpx;
		height: 150rpx;
		background-color: #d5e8ff;
		border-radius: 50%;
		display: flex;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		border: 4rpx solid whitesmoke;
		box-shadow: 2rpx 4rpx 10rpx rgba(211, 211, 211, 0.6);
	}
	::v-deep .avatar{
		width: 100%;
		height: 100%;
	}
	.introduce{
		display: -webkit-box;
		height: 110rpx;
		width: 660rpx;
		position: relative;
		top: 60rpx;
		word-wrap: break-all;
		word-break: normal;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		font-size: 0.85rem;
		overflow: hidden;
		color: rgba(122, 122, 122, 1.0);
	}
	.concernAndFans{
		display: flex;
		height: 100px;
		position: relative;
		top: 140upx;
		left: 70%;
	}
	.concernAndFans>view{
		position: relative;
	}
	.concern{
		right: 60rpx;
	}
	.data{
		color: rgba(107, 107, 107, 1.0);
		font-size: 1rem;
		font-weight: bolder;
	}
	.concern>p, .fans>p{
		font-size: 0.8rem !important;
		font-weight: 400 !important;
		color: darkgray !important;
	}
	.mainFrame{
		position: relative;
		top: -78upx;
	}
	::v-deep .tabs{
		margin: 0 auto;
		border-bottom: 1rpx solid rgba(234, 234, 234, 1.0);
		letter-spacing: 8rpx;
	}
	::v-deep .u-tabs__wrapper__nav__line{
		text-align: center;
	}
	.frame{
		position: relative;
		margin-top: 20rpx;
		height: 1500rpx;
	}
</style>